import React, { Component } from 'react';
import { $http } from '../../../containers/config/https';
import { Timeline, Icon, Table, Steps, Button, Card } from 'antd';
import PatientInfo from './PatientDetail.jsx';
import asyncComponent from '../../../routers/AsyncComponent.js';
import ColumnAuthoritysModel from '../../columnAuthority/ColumnAuthoritysModel';
import { Util, dayFormat } from 'tools/index';
let user;
let patientData;
const { Step } = Steps;
class PatientCourse extends Component {

    constructor(props) {
        patientData = JSON.parse(sessionStorage.getItem('patientData'));
        user = window.sessionStorage.userData ? JSON.parse(window.sessionStorage.userData) : {}
        super(props);
        this.state = {
            admID: this.props.admID ?this.props.admID : "",
            patient: [],
            total: 0,
            page: 1,
            pageSize: 20,
            columns: [],
            data: [],
            nextPrograme: "",
            startDate: "",
            stateCode: "",
            tableWidth: '',
            component: '',
            patID: "",
            current: 0,
            colunmsCode: '',
        }
    }

    componentWillUnmount() {
    }

    componentWillReceiveProps(nextProps) {
    }


    componentDidMount() {
        if(this.props.onRef)
        {
            this.props.onRef(this);
        }
        this.loadPatienCourse()
    }

    loadPatienCourse = () => {
        //04040015{
        let data = {
            params: [{
                admID: this.props.admID ?this.props.admID : (patientData.admID ? patientData.admID : this.state.admID ),
                cbEventID: "",
                course:"course",
            }]
        }
        $http.post('urlDeault', this, {
            code: "04040015",
            data: data,
            success: (res) => {
                if (+res.errorCode === 0) {
                    this.setState({
                        patient: res.result.Data,
                        current: 0,
                    });
                    if (res.result.Data.length > 0) {
                        this.selectCourseDetail(res.result.Data[0]);
                    }
                }
            }
        })
    }

    loadCheckInfo = () => {
        let data = {
            params: [{
                admID: this.props.admID ?this.props.admID : (patientData.admID ? patientData.admID : this.state.admID ),
                startDate: this.state.startDate,
                code: this.state.nextPrograme,
                state: this.state.stateCode,
            }]
        }
        $http.post('urlS', this, {
            code: '04040022',
            data: data,
            success: function (res) {
                if (+res.errorCode === 0) {
                    this.setState({
                        data: res.result.data,
                    })
                }
            }
        })
    }

    selectCourseDetail(item) {
        //var patientData = SessionStorage.getItem("patientData")
        let { code, date, nextPrograme, colunmsCode, component } = item;
        var flag = true
        if (code == this.state.stateCode) {
            flag = false
        }
        if (component != "") {
            // if (flag) {
            this.setState({
                component: component,
                stateCode: code,
            })
            // } else {
            //     this.setState({
            //         component: "",
            //         stateCode: "",
            //         columns: [],
            //     })
            // }
        } else {
            this.setState({
                stateCode: code,
                startDate: date,
                component: component,
                nextPrograme: nextPrograme,
            }, () => {
                if (colunmsCode != "") this.getDetailTableColumns(colunmsCode)
            })
            // if (colunmsCode != "" && flag) {

            // } else {
            //     this.setState({
            //         columns: [],
            //         stateCode: "",
            //         component: "",
            //     })
            // }
        }
    }



    // 获取明系列表头数据
    getDetailTableColumns = (ColunmsCode, code, date) => {
        let data = {
            params: [{
                reactCode: [ColunmsCode],
                compontName: ColunmsCode,
                type: 'C',
            }]
        }
        $http.post('urlS', this, {
            code: '01040073',
            data: data,
            success: function (res) {
                if (+res.errorCode === 0) {
                    var columns = []
                    columns = res.result.C
                    if (columns) {
                        if (ColunmsCode == "OrderSearch") {
                            for (var ci = 0; ci < columns.length; ci++) {
                                if (columns[ci].dataIndex == 'lifeCycle') {
                                    var diagColumns = [];
                                    diagColumns.push({
                                        title: user.language != 'EN' ? user.language != 'EN' ? columns[ci].title : columns[ci].enDescripts : columns[ci].enDescripts,
                                        dataIndex: columns[ci].dataIndex,
                                        //width: width,
                                        align: 'center',
                                        render: (text, data, index) => {
                                            return <span style={{ cursor: "pointer" }} onClick={(e) => this.handleOpen(e, data.ordID)}><span style={{ color: "#096dd9" }}>生命周期</span></span>
                                        }
                                    })
                                    columns[ci] = diagColumns[0]
                                }
                            }
                        }
                    }
                    this.setState({
                        ENObj: res.result.language.EN,
                        CNObj: res.result.language.CN,
                        columns: columns,
                        tableWidth: res.totalWidth,
                        colunmsCode: ColunmsCode
                    }, () => {
                        this.loadCheckInfo()
                    })
                }
            }
        })
    };

    ChangeCurrent = (current) => {
        this.setState({
            current: current
        });
    }
    // 显示分页总条数
    showTotal(total) {
        return `共 ${total} 条`;
    }

    // 页码改变的回调，参数是改变后的页码及每页条
    onChange = (page, pageSize) => {
        this.compilePage(page, pageSize);
    }

    // 条数改变的回调
    onShowSizeChange = (current, size) => {
        this.compilePage(1, size);
    }
    onColumnRef = (ref) => {
        this.columnRef = ref;
    }
    render() {
        let patientCourse = []
        this.state.patient && this.state.patient.map((item, index) => {
            patientCourse.push(
                <Step disabled={item.nextPro == "N"}
                    title={(
                        <div className={((this.state.current == index) && (item.nextPro == "Y")) ? "selected" : item.nextPro == "N" ? "disabledItem" : "unSelected"}>
                            <span style={{ "line-height": "32px", "float": "left", "font-size": "16px" }}>【{item.patEventDesc}】</span>
                        </div>
                    )}
                    onClick={this.selectCourseDetail.bind(this, item)}
                    description={(
                        <div className={((this.state.current == index) && (item.nextPro == "Y")) ? "selected" : 'normalText'}>
                            <span style={{ "line-height": "36px", "vertical-align": "bottom" }}>{item.patEventStartDate}&nbsp;&nbsp;{item.patEventStartTime}&nbsp;&nbsp;{item.user}</span>
                        </div>
                    )} />
            )
        })

        const Component = asyncComponent(() => import('../../' + this.state.component));
        return (
            <div className='patientCourseModal'>
                <ColumnAuthoritysModel
                    clientWidth='800px'
                    compontName={this.state.colunmsCode}
                    configType="C"
                    onRef={this.onColumnRef}
                    reloadData={this.getDetailTableColumns.bind(this, this.state.colunmsCode)}
                />
                <PatientInfo admID={(this.props.admID) && (!Util.isEmpty(this.props.admID)) ? this.props.admID :  this.state.admID} />
                <div style={{ "width": "100%", "height": "calc(100% - 45px)" }}>
                    <Card  className="course" >
                        <div style={{ "width": "100%", "height": "100%" }}>
                            <Steps direction="vertical" size="small" onChange={this.ChangeCurrent} current={this.state.current}>
                                {patientCourse}
                            </Steps>
                        </div>
                    </Card>
                    <div className='courseInfo'>
                        {this.state.component != "" ?
                            <Component admID={this.props.admID} patID={this.props.patID}/> : (
                                <div style={{ width: '100%', height: '100%', overflow: 'hidden' }}>
                                    <div style={{ width: '100%', height: 'calc(100% - 45px)', overflow: 'hidden' }} className='coursetable'>
                                        <Table
                                            style={{ width: '100%', "padding": "5px" }}
                                            dataSource={this.state.data}
                                            columns={this.state.columns}
                                            rowClassName="editable-row"
                                            bordered
                                            pagination={false}
                                            onHeaderRow={column => {
                                                return {
                                                    onDoubleClick: () => {
                                                        this.columnRef.onOpenModel();
                                                    }
                                                };
                                            }
                                            }
                                            scroll={{ y: 'calc(100% - 45px)', x: this.state.tableWidth }}
                                        />
                                    </div>
                                    {/* <div style={{ width: '100%', height: '45px', overflow: 'hidden' }}>
                                        <CommonPagination
                                            size='small'
                                            current={this.state.page}
                                            total={this.state.total}
                                            search='search'
                                            onShowSizeChange={this.onShowSizeChange.bind(this)}
                                            complete={true}
                                            dataSource={this.state.data}
                                            onChange={this.onChange.bind(this)}
                                            scroll={{ y: store.getState().tableHeight.y + 'px' }}
                                        />
                                    </div> */}
                                </div>
                            )


                        }
                    </div>
                </div>
            </ div>
        )
    }


} export default PatientCourse
